<template>
    <div class="address-wrapper">
        <!--收货地址列表-->
        <scroller class="address-list" show-scrollbar="false" scroll-direction="horizontal" v-if="addressList.length">
            <!--占位符-->
            <div ref="first" class="place-hold-node"></div>

            <div :class="['address-item', selectedAddrId == addr.addr_id ? 'address-item-active' : 'address-item-common']" v-for="(addr,index) in addressList" :ref="'cel_' + index" @click="selectAddress(addr)">
                <div class="address-top">
                    <div class="address-top-left">
                        <text class="addr-txt font-msyhl">{{addr.addr_name}}</text>
                        <image v-if="addressDefaultId == addr.addr_id && addr.addr_default == 1" resize="cover" class="address-default-img" :src="addrDefaultImg"></image>
                    </div>

                    <text class="addr-txt font-msyhl">{{addr.addr_phone}}</text>
                </div>

                <text class="addr-info font-msyhl">{{addr.addr_prov}}省 {{addr.addr_city}}市 {{addr.addr_area}} {{addr.addr_info}} {{addr.addr_neighbourhood}}</text>

                <div class="address-bot">
                    <div class="address-bot-left">
                        <image resize="cover" class="addr-edit-icon" :src="addrEditIcon" @click="editAddress(addr)"></image>
                        <image resize="cover" class="addr-del-icon" :src="addrDelIcon" @click="delAddress(addr)"></image>
                    </div>

                    <image v-if="selectedAddrId == addr.addr_id" resize="cover" class="addr-selected-icon" :src="addrSelectedIcon"></image>
                </div>
            </div>

            <div ref="last" class="address-item address-new-item" @click="addAddress">
                <image resize="cover" class="addr-new-btn" :src="addrNewBtn"></image>
                <text class="addr-new-txt font-msyhl">添加收货地址</text>
            </div>
        </scroller>

        <!--暂无收货地址-->
        <div class="addr-empty" v-if="!addressList.length" @click="addAddress">
            <image resize="cover" class="addr-new-btn" :src="addrNewBtn"></image>
            <text class="addr-new-txt font-msyhl">添加收货地址</text>
        </div>

        <image resize="cover" class="address-border-img" :src="addressBorderImg"></image>
    </div>
</template>

<style scoped>
    .address-wrapper {
        width: 1080px;
        height: 334px;
    }
    .address-list {
        height: 328px;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .place-hold-node {
        width: 30px;
        height: 250px;
        background-color: transparent;
    }
    .address-border-img {
        width: 1080px;
        height: 6px;
    }
    .address-item {
        width: 500px;
        height: 250px;
        border-width: 1px;
        border-color: #4d2805;
        border-radius: 8px;
        margin-right: 15px;
        padding-top: 28px;
        padding-bottom: 24px;
        padding-left: 27px;
        padding-right: 27px;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
    }
    .address-new-item {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .address-item-active {
        background-color: rgba(255,255,255,0.5);
    }
    .address-item-common {
        background-color: rgba(255,255,255,0);
    }
    .address-top {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .address-top-left {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .addr-txt {
        font-size: 28px;
        color: #313131;
    }
    .address-default-img {
        width: 100px;
        height: 30px;
        margin-left: 4px;
    }
    .addr-info {
        font-size: 26px;
        color: #313131;
        line-height: 30px;
    }
    .address-bot {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .address-bot-left {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .addr-edit-icon,
    .addr-del-icon {
        width: 36px;
        height: 36px;
        margin-right: 16px;
    }
    .addr-selected-icon {
        width: 47px;
        height: 44px;
    }
    .addr-new-btn {
        width: 100px;
        height: 100px;
        margin-bottom: 20px;
    }
    .addr-new-txt {
        font-size: 36px;
        color: #e31336;
    }
    .addr-empty {
        flex: 1;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .font-msyhl {
        font-family: msyhl;
    }
</style>

<script>
    import addressBorderImg from 'assets/images/address-info-line.png';
    import addrDefaultImg from 'assets/images/address-default-icon.png';
    import addrEditIcon from 'assets/images/edit-icon-bg.png';
    import addrDelIcon from 'assets/images/del-icon-bg.png';
    import addrSelectedIcon from 'assets/images/address-selected-icon.png';
    import addrNewBtn from 'assets/images/new-address-icon.png';
    import navigator from 'utils/navigator';
    import route from 'constants/route';
    import constant from 'constants/constant';
    import api from 'api/api';
    import modal from 'utils/modal';

    const dom = weex.requireModule('dom');

    export default{
        props: {
            addressList: {
                type: Array,
                default: [],
                require: true
            },
            selectedAddrId: {
                type: String,
                default: null,
                require: true
            },
            addressDefaultId: {
                type: String,
                default: null,
                require: true
            }
        },
        data(){
            return {
                addressBorderImg: addressBorderImg,
                addrDefaultImg: addrDefaultImg,
                addrEditIcon: addrEditIcon,
                addrDelIcon: addrDelIcon,
                addrSelectedIcon: addrSelectedIcon,
                addrNewBtn: addrNewBtn
            }
        },
        methods: {
            selectAddress(addr){ //选择地址
                if(addr.addr_id == this.selectedAddrId) return false;
                this.$emit("selectAddress",addr.addr_id);
            },
            editAddress(addr){ //编辑地址
                let options = {
                    classType: constant.Pop_Class_Type,
                    url: route.address_edit,
                    title: '编辑收货地址',
                    params: {
                        address: addr,
                        from: 'fromConfirm'
                    }
                };
                navigator.push(options);
            },
            delAddress(addr){ //删除地址
                let self = this;
                modal.confirm({message: "确认删除该收货地址吗?"}).then(() => {
                    api.sendHttp("delUserInfoApi",{id: addr.addr_id}).then(res =>{
                         self.$emit("delAddress",addr.addr_id);
                    },
                    res =>{
                        modal.toast(res.msg || "删除收货地址失败");
                    });
                });
            },
            addAddress(){ //新增地址
                let options = {
                    classType: constant.Pop_Class_Type,
                    url: route.address_edit,
                    title: '新增收货地址',
                    params: {
                         from: 'fromConfirm'
                    }
                };
                navigator.push(options);
            },
            scrollTo(node){
                let el = this.$refs[node];
                if(el) dom.scrollToElement(el, {offset:0, animated:false});
            }
        }
    }
</script>
